* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* 背景颜色 径向渐变 */
    background: radial-gradient(#353c44, #222931);
}

.circle {
    border-radius: 50%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.container {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid rgb(18, 20, 20);
    background-color: #384c50;
    box-shadow: 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset;
}

.container .box1 {
    width: 238px;
    height: 238px;
    background-color: rgb(22, 26, 27);
    box-shadow: 0 0 4px 1px #52fefe;
}

.container .box2 {
    width: 220px;
    height: 220px;
    background-color: #fff;
    box-shadow: 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset;
}

.container .box3 {
    width: 180px;
    height: 180px;
    background-color: #073c4b;
    box-shadow: 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset;
}

.container .box4 {
    width: 120px;
    height: 120px;
    border: 1px solid #52fefe;
    background-color: #fff;
    box-shadow: 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset;
}

.container .box5 {
    width: 70px;
    height: 70px;
    border: 5px solid #1b4e5f;
    box-shadow: 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset;
}

.container .box6 {
    position: relative;
    width: 100%;
    height: 100%;
    animation: rotate 3s linear infinite;
}

.container .box6 .coil {
    position: absolute;
    width: 30px;
    height: 20px;
    top: calc(50% - 110px);
    left: calc(50% - 15px);
    background-color: #073c4b;
    box-shadow: 0 0 5px #52fefe inset;
    /* calc方法自动计算数值  var() 函数调用了我们刚刚给元素定义的 --i 属性值，然后分别乘以 45度，算出各自的度数 */
    transform: rotate(calc(var(--i) * 45deg));
    /* 设置旋转中心 */
    transform-origin: center 110px;
}

/* 定义旋转动画 */
@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
